import "./assetReview.css";
import React, { useState } from "react";
import ReactEcharts from "echarts-for-react";
import { Table } from "antd";
import { useEffect } from "react";
import axios from "axios";
const { Column, ColumnGroup } = Table;

const AssetReview = () => {
  const [datas, setDatas] = useState([]);
  useEffect(() => {
    const Fn = async () => {
      const res = await axios.get("http://localhost:1019/tag-datas");
      setDatas(res.data);
    };
    Fn();
  }, []);
  const [tableList, setTableList] = useState([]);
  useEffect(() => {
    const Fn = async () => {
      const res = await axios.get("http://localhost:1019/tableList1");
      setTableList(res.data);
    };
    Fn();
  }, []);
  const option = {
    title: {
      text: "资产配置总额",
      subtext: "合计：7,600,000.00",
      left: "left",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      bottom: "bottom",
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        data: [
          { name: "现金管理类", value: 2000000.0 },
          { name: "固定收益类", value: 2000000.0 },
          { name: "股票权益类", value: 3000000.0 },
          { name: "另类及其他", value: 600000.0 },
        ],
        label: {
          formatter: "{b}\n{c}",
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  const option1 = {
    xAxis: {
      type: "category",
      data: ["现金管理类", "固定收益类", "股票权益类", "另类及其他"],
    },
    yAxis: {
      type: "value",
    },
    legend: {
      bottom: "bottom",
    },
    series: [
      {
        name: "当前配置占比",
        data: [120, 200, 150, 80],
        type: "bar",
        label: {
          show: true,
          position: "top",
        },
      },
      {
        name: "建议配置占比",
        data: [40, 30, 50, 60],
        type: "bar",
        label: {
          show: true,
          position: "top",
        },
      },
    ],
  };

  return (
    <div className="asset-review">
      <div className="data">
        <div className="top">
          <p>
            收益数据区间：<span>今年以来</span>
            <span style={{ marginLeft: "16px" }}>截止日期：2024-10-01</span>
          </p>
        </div>
        <div className="bottom">
          {datas.map((item) => {
            return (
              <div className="num" key={item.id}>
                <p>{item.num}</p>
                <div className="words">
                  {item.id > 3 ? (
                    <div
                      style={{
                        display: "flex",
                        alignItems: "center",
                        color: "#CC3C29",
                      }}
                    >
                      战胜
                      <p
                        style={{
                          margin: "0 8px",
                          display: "inline-block",
                          width: "1px",
                          height: "14px",
                          backgroundColor: "#E6E6E6 ",
                        }}
                      ></p>
                    </div>
                  ) : null}
                  {item.label}
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <div className="echarts">
        <div className="header1">
          <div className="title">
            <div
              style={{
                marginRight: "8px",
                width: "4px",
                height: "16px",
                background: "#1D70F5",
              }}
            ></div>
            产品数据概览
          </div>
          <div className="more">更多资产配置建议书</div>
        </div>
        <div className="two-echarts">
          <div className="left">
            <ReactEcharts
              option={option}
              style={{ height: "400px" }}
              className={"react_for_echarts"}
            />
          </div>
          <div className="right">
            <ReactEcharts
              option={option1}
              style={{ height: "400px" }}
              className={"react_for_echarts"}
            />
          </div>
        </div>
      </div>
      <div className="table1">
        <Table
          dataSource={tableList}
          bordered
          scroll={{
            x: "calc(700px + 50%)",
            y: 245,
          }}
        >
          <Column title="资产类型" dataIndex="name" key="1" width={80} />
          <ColumnGroup title="前一次资产配置情况(XXX-X-X)">
            <Column
              title="资产建议书出具时配置金额(元)"
              dataIndex="name"
              key="2"
              width={150}
            />
            <Column
              title="资产建议书出具时配置占比(%)"
              dataIndex="name"
              key="3"
              width={150}
            />
            <Column
              title="资产建议书出具时建议配置金额(元)"
              dataIndex="money"
              key="4"
              width={150}
            />
            <Column
              title="资产建议书出具时建议配置占比(%)"
              dataIndex="grade"
              key="5"
              width={150}
            />
          </ColumnGroup>
          <ColumnGroup title="当前资产配置情况">
            <Column
              title="当前配置金额(元)"
              dataIndex="money"
              key="6"
              width={100}
            />
            <Column
              title="当前配置占比(%)"
              dataIndex="grade"
              key="7"
              width={80}
            />
          </ColumnGroup>
          <ColumnGroup title="建议资产配置情况">
            <Column
              title="建议配置金额(元)"
              dataIndex="money"
              key="8"
              width={100}
            />
            <Column
              title="建议配置占比(%)"
              dataIndex="grade"
              key="9"
              width={80}
            />
          </ColumnGroup>
          <ColumnGroup title="目标偏移情况">
            <Column
              title="偏离金额(元)"
              dataIndex="money"
              key="10"
              width={100}
            />
            <Column
              title="偏离比例(%)"
              dataIndex="grade"
              key="11"
              width={100}
            />
          </ColumnGroup>
        </Table>
      </div>
    </div>
  );
};
export default AssetReview;
